<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <el-form
          :inline="true"
          :rules="rules"
          :model="monitorForm"
          class="demo-form-inline marginTop0"
          ref="userListFrom"
          label-width="60px"
        >
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>审核退货单</span>
            </div>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>退货单号：<span>{{ info.order_sn }}</span></li>
              <li>采购方式：<span>{{ base.modeList[info.mode] }}</span></li>
              <li>采购员/供应商：<span>{{
                  info.mode == 1
                    ? base.buyer[info.buyer_id]
                    : base.supplier[info.supplier_id]
                }}</span></li>
              <li>退货金额：<span>{{ info.money }}</span></li>
              <li>单据状态：<span>{{ base.status[info.status] }}</span></li>
              <li>创建时间：<span>{{ parseTime(info.created_at,'{y}-{m}-{d}') }}</span></li>
              <li>审核时间：<span>{{ info.return_time?parseTime(info.return_time,'{y}-{m}-{d}'):'' }}</span></li>
              <li class="main_w100 box">
                备注：
                <div class="box main_xqi" style="margin-top: -4px">
                  <el-input
                    v-model.trim="monitorForm.form.remark"
                    placeholder="备注"
                    clearable
                    style="width: 100%"
                  ></el-input>
                </div>
              </li>
            </ul>
          </div>
          <div class="main_tile boxdq marginTop15">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_white padding10 marginBottom10">
            <div class="main_white">
              <div class="main_table marginTop0">
                <el-table
                  ref="multipleTable"
                  :data="monitorForm.list"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                >
                  <el-table-column label="序号">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="name" width="150">
                    <template slot-scope="scope"
                      >{{ scope.row.goods.name }}【{{
                        scope.row.goods_spu.spu_name.title
                      }}】</template
                    >
                  </el-table-column>
                  <el-table-column
                    label="单位"
                    prop="goods_spu.spu_unit.title"
                  />
                  <el-table-column label="实时库存" prop="goods_spu.inventory.num" width="130" />
                  <el-table-column
                    label="退货数量"
                    prop="num"
                    width="150"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.num'"
                        :rules="rules.num"
                        label-width="10px"
                        label=" "
                      >
                        <el-input
                          v-model.trim="scope.row.num"
                          @input="scope.row.xs = false"
                          placeholder="退货数量"
                          class="wid110"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="退货单价"
                    prop="price"
                    width="150"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.price'"
                        :rules="rules.price"
                        label-width="10px"
                        label=" "
                      >
                        <el-input
                          v-model.trim="scope.row.price"
                          @input="scope.row.xs = false"
                          placeholder="退货单价"
                          class="wid110"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="退货金额"
                    width="120"
                    prop="userNickname"
                  >
                    <template slot-scope="scope">{{
                      (scope.row.num * scope.row.price).toFixed(2)
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="备注"
                    prop="remark"
                    width="350"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item label-width="0" label="">
                        <el-input
                          v-model.trim="scope.row.remark"
                          placeholder="备注"
                          class="wid240"
                        ></el-input>
                      </el-form-item>
                      <el-link
                        type="danger"
                        @click="
                          scope.row.show
                            ? lengt <= 1
                              ? ''
                              : scdelete(scope.$index, true)
                            : scdelete(scope.$index)
                        "
                        class="paddingTop20"
                        >删除</el-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="newConBox_p200 paddingBottom10" id="newConBox">
            <div class="newConBox_h32">
              <div
                :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
              >
                <div class="mainor_prl">
                  <el-button
                    type="primary"
                    @click="preservation(0)"
                    v-repeatClick
                    >保存</el-button
                  >
                  <el-button
                    class="reset marginLeft10"
                    type="info"
                    @click="preservation(1), (beforeNext = false)"
                    v-repeatClick
                    >保存并审核</el-button
                  >
                  <el-button
                    class="marginLeft10"
                    @click="preservation(2), (beforeNext = false)"
                    v-repeatClick
                    >取消退货单</el-button
                  >
                  <el-button @click="$router.back(-1)">取消</el-button>
                </div>
                <div class="mainor_prr">
                  <span>合计：¥{{ total }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const shuju = {
  list: {
    id: "",
    name: "",
    goods_id: "",
    goods_spu_id: "",
    spu_name: "",
    unit: "",
    price: "",
    num: "",
    purchaseReturn_num: "",
    remark: "",
    show: false,
  },
  form: {
    remark: "",
  },
};
import {
  purchaseReturn_info,
  purchaseReturn_base,
  purchaseReturn_check,
  purchaseReturn_deleteList,
} from "@/api/purchasing/purchasingReturn";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/purchasing/purchasingReturn_edit";
import { parseTime } from "@/utils/index";

export default {
  computed: {
    total() {
      let sz = 0;
      this.monitorForm.list.forEach((e) => {
        sz += parseFloat(e.num * e.price);
      });
      return sz.toFixed(2);
    },
    lengt() {
      let zj = 0;
      this.monitorForm.list.map((e) => {
        if (e.show) {
          zj++;
        }
      });
      return zj;
    },
  },
  components: {},
  data() {
    return {
      // 验证
      rules,
      // 时间
      parseTime,
      // 基本信息
      info: {
        created_at:'2020-10-20',
        type:0,
        status:0,
        mode:0,
      },
      base: {
        modeList: ["后台"],
        status: ["后台"],
        buyer: ["后台"],
        supplier: ["后台"],
        typeList: ["待审核"],
      },
      listLoading: false,
      // 列表数据
      monitorForm: {
        form: {
          remark: "",
        },
        list: [],
      },
      // 商品搜索
      formzd: {
        value: "",
      },
      // id
      id: this.$route.params.id,
      // 监听滚动
      searchBarFixed: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 基本信息
    this.purchaseReturn_info();
    this.purchaseReturn_base();
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 删除
    scdelete(index, type) {
      if (type) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(
                Object.assign(apiUrl().name, {
                  id: this.monitorForm.list[index].id,
                })
              ) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          { id: this.monitorForm.list[index].id }
        );
        purchaseReturn_deleteList(data).then((res) => {
          if (res.errcode == 0) {
            this.monitorForm.list.splice(index, 1);
          } else {
            this.$message.error(res.errmsg);
          }
        });
      } else {
        this.monitorForm.list.splice(index, 1);
      }
    },
    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          let num=0;
          JSON.parse(JSON.stringify(this.monitorForm)).list.map((e) => {
            if (parseFloat(e.num) == 0 || parseFloat(e.price) == 0) {
              num++;
            }
          });
          if (num > 0) {
            this.$message.error("请输入数量和单价大于0");
            return;
          }
          if(type==2){
            this.$confirm("保存并审核通过退货单?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.purchaseReturn_check(type)
              })
              .catch(() => {});
          }else if(type==3){
            this.$confirm("确定关闭退货单?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.purchaseReturn_check(type)
              })
              .catch(() => {});
          }else{
            this.purchaseReturn_check(type)
          }
        }
      });
    },
    purchaseReturn_check(type) {
      let arry = [];
      let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
      monitorForm.list.map((e) => {
        arry.push({
          id: e.id ? e.id : null,
          goods_id: e.goods_id,
          goods_spu_id: e.goods_spu_id,
          remark: e.remark,
          num: e.num,
          price: e.price,
        });
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { id: this.id, status: type })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        monitorForm.form,
        {
          list: JSON.stringify(arry),
          id: this.id,
          status: type,
        }
      );
      purchaseReturn_check(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 基本信息
    purchaseReturn_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      purchaseReturn_info(data).then((res) => {
        if (res.errcode == 0) {
          res.data.info.purchase_return_list.map((e) => {
            e.show = true;
          });
          this.monitorForm.list = res.data.info.purchase_return_list;
          this.monitorForm.form.remark = res.data.info.remark;
          this.info = res.data.info;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    purchaseReturn_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      purchaseReturn_base(data).then((res) => {
        if (res.errcode == 0) {
          this.base = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .newConBox.on {
    margin-left: -10px;
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
        }
        .main_upImg {
          /deep/ul {
            li {
              padding-left: 0;
            }
          }
          /deep/.el-upload-list--picture-card
            .el-upload-list__item:first-child {
            margin-left: 145px;
          }
        }
      }
    }
  }
  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 60px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        &:first-child {
          & > span {
            width: 85px;
          }
        }
      }
    }
  }
  .base_p {
    width: 80px;
  }
  .main_page_top {
    margin-top: 7px;
    margin-left: 10px;
    use {
      fill: $menuText;
    }
    &:hover {
      cursor: pointer;
      use {
        fill: $menuActiveText;
      }
    }
  }
}
</style>
